<template>
  <u-popup :show="isShowError" mode="center" round="20rpx">
    <view class="modal">
      <view class="title">连接错误，请手动复制密码去连接</view>
      <view class="step-1">
        <view class="step-text"
          >1、在设置中找到{{ ssid }}，若找不到，请添加该网络</view
        >
        <u-button
          @click="handleCopy(ssid, 'WiFi名称复制成功')"
          :customStyle="{ ...buttonStyle }"
          text="复制网络名称"
        ></u-button>
      </view>
      <view class="step-2">
        <view class="step-text"
          >2、在设置中输入WiFi密码（WPA/WPA2-Personal）</view
        >
        <u-button
          @click="handleCopy(password, 'WiFi密码复制成功')"
          :customStyle="{ ...buttonStyle }"
          text="复制密码"
        ></u-button>
      </view>
      <view class="footer flex-align-center">
        <u-button
          type="primary"
          :color="themeColor"
          text="去设置"
          @click="handleSetting"
          :customStyle="{ ...buttonStyle }"
        ></u-button>
        <u-button
          text="取消"
          :customStyle="{ ...buttonStyle }"
          @click="close"
        ></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      buttonStyle: {
        width: "250rpx",
      },
      isShowError: false,
      ssid: "",
      password: "",
    };
  },
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  methods: {
    open({ ssid, password }) {
      this.password = password;
      this.ssid = ssid.replace("%20", " ");
      this.isShowError = true;
    },
    close() {
      this.isShowError = false;
    },
    handleSetting() {
      uni.startWifi({
        success: (res) => {
          this.handleCopy(this.password, "WiFi密码复制成功");
          console.log("startWifi成功", res);
          setTimeout(() => {
            uni.connectWifi({
              SSID: this.ssid,
              password: this.password,
              maunal: true,
              forceNewApi: false,
              success: () => {
                console.log("connectWifi成功");
              },
            });
          }, 1000);
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({
            icon: "error",
            title: "请打开手机WiFi",
          });
        },
      });
    },
    handleCopy(val, text) {
      uni.setClipboardData({
        data: val,
        showToast: false,
        success: function () {
          uni.showToast({
            title: text,
            icon: "none",
          });
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.modal {
  padding: 20rpx;
  width: 80vw;
}
.title {
  font-weight: bold;
  font-size: 36rpx;
  padding: 20rpx 0;
}
.footer {
  margin-top: 20rpx;
}
.step-text {
  color: #888888;
  font-size: 28rpx;
  padding: 10rpx 0;
}
</style>
